<template>
  <lay-page-header
    :content="detailType ? '歌单详情' : '歌手详情'"
    @back="$router.back()"
    class="page-header"
  ></lay-page-header>
  <div class="container-detail">
    <div class="left">
      <div class="img-infor"><x-img class="x-img" :src="detail.img"></x-img></div>
      <h3 style="font-weight: 700" class="descrip" v-if="detailType">{{ detail.title }}</h3>
      <div class="descrip" v-else>
        <h3 style="font-weight: 700">基本资料</h3>
        <div class="descrip-item">
          <div class="descrip-left">性别：</div>
          <div class="descrip-right">{{ detail.sex ? '男' : '女' }}</div>
        </div>
        <div class="descrip-item">
          <div class="descrip-left">生日：</div>
          <div class="descrip-right">{{ detail.birthDay }}</div>
        </div>
        <div class="descrip-item">
          <div class="descrip-left">故乡：</div>
          <div class="descrip-right">{{ detail.city }}</div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="introduction">
        <h2 style="font-weight: 700">{{ detail.songerName || '歌单简介' }}</h2>

        <lay-tooltip :content="detail.songerDescription" ref="tooltip" position="bottom" :isDark="false">
          <div class="espli">{{ detail.songerDescription }}</div>
        </lay-tooltip>
      </div>
      <h3 style="font-weight: 700">
        歌单评分 <span style="font-size: 20px">{{ all1 }}分</span>
      </h3>
      <lay-rate v-model="all1" readonly></lay-rate>
      <span style="font-weight: 700; margin: 0 10px">立即评价</span>
      <lay-rate v-model="all2"></lay-rate>
      <!-- 歌曲列表 -->
      <page-table :config="detailConfig" :data="songList" @handleEdit="handleEdit"> </page-table>
      <!-- 发送评论 -->
      <comment-send
        v-model:send-content.cusTrim="content"
        @update:sendContent="handle222"
        class="send"
        v-if="detailType"
        @clickButton="sendComment"
      ></comment-send>
      <!-- 评论列表 -->
      <comment-list v-if="detailType" :modeNo="$route.query.id" :refresh="refresh"></comment-list>
    </div>
  </div>
</template>

<script>
import * as axiosApi from './api'
import { detailConfig, getCityStr } from './config'
import { reactive, onMounted, toRefs, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { userInfor } from '@/hooks/userInfor'
import { ElMessage } from 'element-plus'

export default {
  setup() {
    const route = useRoute()
    const store = useStore()
    const content = ref('')
    // 通过路由参数判断是歌单详情还是歌手详情 1，歌单详情，0，歌手详情
    const _data = reactive({
      songList: [],
      detail: {},
      detailType: Number(route.query.type),
      all1: 0,
      all2: 0,
      refresh: false
    })

    onMounted(() => {
      _data.all1 = 4.2
      _data.all2 = 0
    })

    if (_data.detailType) {
      getSonglistDetail()
    } else {
      getSongerDetail()
    }

    // 获取歌单详情
    function getSonglistDetail() {
      axiosApi.getSonglists({ songlistNo: route.query.id }).then(res => {
        _data.detail = res.data.content.map(item => {
          return {
            img: item.songListImg,
            title: item.title,
            songerDescription: item.description
          }
        })[0]
        // 歌曲列表
        axiosApi.getSongsList({ songlistNo: route.query.id }).then(res => {
          _data.songList = res.data.content.map(item => {
            return {
              ...item,
              title: _data.detail.title
            }
          })
        })
      })
    }
    // 获取歌手详情
    function getSongerDetail() {
      axiosApi.getSongerList({ songerNo: route.query.id }).then(res => {
        _data.detail = res.data.content.map(item => {
          return {
            img: item.songerImg,
            songerDescription: item.description,
            songerName: item.name,
            sex: item.sex,
            birthDay: item.birthDay,
            city: getCityStr(item.city).join(' / ')
          }
        })[0]
      })
      // 歌曲列表
      axiosApi.getSongsList({ songerNo: route.query.id }).then(res => {
        _data.songList = res.data.content
      })
    }
    function handleEdit({ type, params }) {
      if (type === 'row-click') {
        store.commit('playList/ADD_PLAYLIST', params)
      }
    }
    // 发评论
    function sendComment() {
      if (!content.value) return ElMessage({ message: '评论不能为空' })
      axiosApi
        .publishComment({
          content: content.value,
          userNo: userInfor.value.userNo,
          modeNo: route.query.id
        })
        .then(() => {
          content.value = ''
          _data.refresh = !_data.refresh
          ElMessage({
            message: '评论成功',
            type: 'success'
          })
        })
    }
    function handle222(e) {
      content.value = e
    }
    return {
      content,
      ...toRefs(_data),
      detailConfig,
      handleEdit,
      sendComment,
      handle222
    }
  }
}
</script>

<style lang="scss" scoped>
.page-header {
  margin: 20px 0;
}
.container-detail {
  display: flex;
  box-sizing: border-box;
  .left {
    flex: 3;
    .img-infor {
      margin: auto;
      width: 200px;
      height: 200px;
      background-color: pink;
      border-radius: 15px;
      overflow: hidden;
      .x-img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .descrip {
      margin: auto;
      margin-top: 20px;
      width: 200px;
      .descrip-item {
        margin-top: 10px;
        display: flex;
        font-size: 12px;
        .descrip-left {
          white-space: nowrap;
          letter-spacing: 1px;
          font-weight: bold;
          color: #2e2e2e;
          font-size: 14px;
        }
        .descrip-right {
          font-size: 14px;
        }
      }
    }
  }
  .right {
    flex: 7;
    padding: 0 100px;
    .introduction {
      margin-bottom: 20px;
      .espli {
        text-indent: 2em;
        width: 800px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
      }
    }
    .send {
      margin: 20px 0;
    }
  }
}
</style>
